<template>
  <div class="vallet-content-box">
      <div v-show="!showPay">
          <div class="vallet-box">
             <div style="height: 200px;background-image: linear-gradient(to bottom,rgba(255, 243, 190, 1),rgba(254, 224, 128, 1));">
                 <div class="vallet-return">
                     <img style="vertical-align: middle;position: absolute;left: 15px;" @click="Walletreturn()" src="../../assets/img/heiRaturn.svg" alt="">
                     <span style="font-size: 16px;color: #333;font-weight: bold;">SQT充值</span>
                     <span style="position: absolute;right:15px;font-size: 12px;color: #333;" @click="jumpRecord">充值记录</span>
                 </div>
                 <div style="font-size: 36px;font-weight: bold;text-align: center;color: #815003;margin-top:33px;">{{integral}}</div>
                 <div style="font-size: 12px;color: #B08605;margin-top: 6px;text-align: center;">我的SQT</div>
             </div>
          </div>
           <div class="walleticon-detail">
               <div class="walleticon-select">
                 <div class="walleticon-select-box" v-for="(val,index) in intergralList" :class="activeNum == index?'walleticon-select-active':''" @click="selectCli(val,index)">
                     <div v-if="index!=0" style="pointer-events: none;">
                         <div>{{val.integral}}SQT</div>
                         <div style="font-size: 24px;font-weight: bold;margin-top:5px;">¥ {{val.rmb}}</div>
                         <img v-show="activeNum == index" style="position: absolute;bottom: 0px;right:0px;" src="../../assets/img/invest-icon-choice.svg" alt="">
                     </div>
                     <div v-else>
                        <div>{{val.integral}}SQT</div>
                        <div style="font-size: 24px;font-weight: bold;margin-top:5px;">¥ {{val.rmb}}</div>
                        <img v-show="activeNum == index" style="position: absolute;bottom: 0px;right:0px;" src="../../assets/img/invest-icon-choice.svg" alt="">
                    </div>
                 </div>
             </div>
             <div>
                 <div style="font-size: 14px;color:#888;margin-top: 40px;margin-bottom: 10px;">请选择支付方式</div>
                 <div>
                     <van-radio-group v-model="radio">
                         <van-cell-group>
                           <van-cell style="padding-left: 33px;" title="支付宝支付" clickable @click="radio = '1'">
                             <template #right-icon>
                                 <img style="position: absolute;left:0px;" src="../../assets/img/invest-icon-Alipay.svg" alt="">
                               <van-radio name="1" checked-color="#FCC740"/>
                             </template>
                           </van-cell>
                           <!-- <van-cell style="padding-left: 33px;" title="微信支付" clickable @click="radio = '2'">
                             <template #right-icon>
                                 <img style="position: absolute;left:0px;" src="../../assets/img/invest-icon-WeChat.svg" alt="">
                                 <van-radio checked-color="#FCC740" name="2" />
                             </template>
                           </van-cell> -->
                         </van-cell-group>
                       </van-radio-group>
                 </div>
             </div>
           </div>
           <div class="wallet-detail-box">
               <button @click="payCli">立即支付</button>
           </div>
      </div>
      <div v-show="showPay">
        <div class="vallet-return">
            <img style="vertical-align: middle;position: absolute;left: 15px;" @click="WalletreturnIframe()" src="../../assets/img/heiRaturn.svg" alt="">
            <span style="font-size: 16px;color: #333;font-weight: bold;">积分充值</span>
            <!-- <span style="position: absolute;right:15px;font-size: 12px;color: #333;" @click="jumpRecord">充值记录</span> -->
        </div>
          <iframe style="width: 100%;height: calc(100vh - 46px);" :src="payUrl" frameborder="0"></iframe>
      </div>
  </div>
</template>

<script>
    import { RadioGroup,cellGroup,Cell, Radio } from 'vant';
    export default {
        name: "integralTopUp",
        data(){
           return{
                userId:"",
                integral:'',
                rmbVal:'',
                activeNum:0,
                radio:'1',
                intergralList:[],
                rmbIntegral:'',
                integral_exchange_id:'',
                payUrl:'',
                showPay:false
           }
        },
        components:{
            [RadioGroup.name]:RadioGroup,
            [Radio.name]:Radio,
            [cellGroup.name]:cellGroup,
            [Cell.name]:Cell,
        },
        mounted() {
            this.userId = localStorage.getItem('user_id');
            this.initData();
        },
        methods:{
            initData(){
                this.$http.post(this.utils.config + "/netmall/app/gamecenter/api/getLoginUserAllTasks?user_id=" + this.userId, { user_id: this.userId }).then((data) => {
                    if (data.data.success) {
                        this.integral = data.data.result.integral.integral;
                    }
                })
                this.$http.get(this.utils.config + "/netmall/app/person/api/integralExchangeConfig").then((data) => {
                    if (data.data.success) {
                        this.intergralList = data.data.result;
                        this.rmbVal = this.intergralList[0].rmb;
                        this.rmbIntegral = this.intergralList[0].integral;
                        this.integral_exchange_id = this.intergralList[0].id;
                    }
                })
                
            },
            //立即支付
            payCli(){
                this.$http.post(this.utils.config + "/netmall/app/person/api/buyIntegral?user_id=" + this.userId+"&price="+this.rmbVal+"&num=1"+"&integral_exchange_id="+this.integral_exchange_id+"&return_url="+encodeURIComponent("http://admin.taojinke.top/#/app/person/api/returnPay")).then((data) => {
                    if (data.data.success) {
                        this.payUrl = data.data.message;
                        this.showPay = true;
                    }
                })
            },
            WalletreturnIframe(){
                this.showPay = false;
            },
            Walletreturn(){
                this.$router.push('/playGame');
            },
            selectCli(val,index){
                this.activeNum = index;
                this.rmbVal = val.rmb;
                this.rmbIntegral = val.integral;
                this.integral_exchange_id = val.id;
            },
            jumpRecord(){
                this.$router.push('/rechargeRecord');  
            }
        }
    }

</script>

<style scoped>
    @import "../../assets/font/iconfont.css";
    .walleticon-select{
        display: flex;justify-content: space-between;
    }
    .walleticon-select-box{
        border: 1px solid #FCC330;
        border-radius: 8px;
        width: 96px;
        height: 90px;
        background-color: #fff;
        padding:14px 12px;
        position: relative;
    }
    .walleticon-select-active{
        background-color: #FFF9DF;
    }
    .vallet-return{
        padding: 12px 15px;
        font-size:16px;
        font-family:PingFangSC-Semibold,PingFang SC;
        font-weight:600;
        color:rgba(255,255,255,1);
        line-height:22px;
        text-align: center;
        position: relative;
        width: 100%;
    }
    .wallet-detail-box{
        width: 100%;
        padding: 11px 15px;
        position: absolute;
        bottom: 0;
    }
    .wallet-detail-box button{
        background-color: #FFD13F;
        width: 100%;
        height: 45px;
        border:none;
        border-radius: 4px;
        font-size: 16px;
        font-weight: bold;
    }
    .walleticon-detail{
        height: calc(100vh - 231px);
        padding: 22px 28px;
        font-size:14px;
        font-family:PingFangSC-Medium,PingFang SC;
        color:#000;
        background-color: #fff;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);
    }
    .wallet-active{
        margin:19px auto auto 1px ;
        font-size:16px;
        font-family:Roboto-Regular,Roboto;
        font-weight:400;
        color:rgba(255,46,103,1);
        line-height:19px;
    }
</style>
